<template>
  <div :class="['sidenav', { 'sidenav-collapsed': isCollapsed }]">
    <el-menu v-show="!isCollapsed" :active="activeRoute" class="menu">

      <el-menu-item index="/" @click="navigateTo('/')">主页</el-menu-item>
      <el-menu-item index="/individual" @click="navigateTo('/individual')">个人中心</el-menu-item>
      <el-menu-item index="/cart" @click="navigateTo('/cart')">购物车</el-menu-item>
      <el-menu-item index="/addProduct" @click="navigateTo('/addProduct')">添加商品</el-menu-item>
      <el-menu-item index="/createUser" @click="navigateTo('createUser')">新增账号</el-menu-item>
      <el-menu-item index="/manages" @click="navigateTo('/manage')">管理用户</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  props: {
    activeRoute: {           // 来定义 activeRoute 属性
      type: String,
      required: true,
    },
  },
  data() {
    return {
      isCollapsed: false, // 控制侧边栏是否收纳
    };
  },
  methods: {
    toggleSidenav() {
      this.isCollapsed = !this.isCollapsed; 
      this.$emit('toggle'); 
    },
    navigateTo(path) {
      this.$emit('update:active-route', path);   // 向 parent 组件发出事件
      this.$router.push(path); // 使用 Vue Router 跳转到指定页面
    },
  },
};
</script>

<style scoped>
.sidenav {
  width: 200px; /* 展开时的宽度 */
  transition: width 0.3s;
  padding: 20px;
  position: relative;
  z-index: 1000;
}

.sidenav-collapsed {
  width: 60px; /* 收纳状态的宽度 */
}

.menu {
  margin-top: 30px; /* 给按钮留出空间 */
  border-radius: 5%;
}
</style>
